<template>
  <view class="ranking-page">

    <!-- 分享记录列表 -->
    <scroll-view
        scroll-y
        @scrolltolower="loadMore"
        :refresher-enabled="true"
        :refresher-triggered="refreshing"
        @refresherrefresh="onRefresh"
        class="scroll-area"
    >
      <!-- 下拉刷新提示 -->
      <view class="refresh-tip" v-if="refreshing">
        <text class="iconfont icon-loading font28"></text>
        <text class="ml-1">正在刷新...</text>
      </view>

      <view v-for="(item,index) in List" :key="index" class="bg-fff d-flex-middle my-2 p-3">
        <view class="d-flex d-flex-between d-flex-middle borderBottom pb-2">
          <text class="font30">{{ item.title }}</text>
          <text class="font24 color999">{{ item.created_at }}</text>
        </view>
        <view class="pt-1">
          <text class="color999 font24">{{ item.content }}</text>
        </view>

      </view>

      <!-- 加载更多提示 -->
      <view class="loading-more text-center py-3" v-if="loadingMore">
        <text class="font24 color999">加载中...</text>
      </view>
      <view class="loading-more text-center py-3" v-else-if="noMoreData">
        <text class="font24 color999">没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  mapState
} from "vuex"
import {
  fileApi,
} from "@/http/fileApi"

export default {
  data() {
    return {
      List: [],
      refreshing: false, // 下拉刷新状态
      loadingMore: false, // 加载更多状态
      noMoreData: false, // 没有更多数据
      page: 1, // 当前页码
      type: 1
    }
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
    })
  },
  onLoad() {
    this.initInviteList()
  },
  methods: {
    async initInviteList() {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '加载中...'
        });

        let params = {
          page: this.page,
        };

        let res = await fileApi.getMessagesList(params);
        // 处理分页相关状态
        if (res.data && Array.isArray(res.data)) {
          // 如果是第一页，直接赋值；否则追加数据
          if (this.page === 1) {
            console.log(res.data, 'res.data')
            this.List = res.data;
          } else {
            this.List = [...this.List, ...res.data];
          }
          // 根据返回的数据判断是否还有更多数据
          this.noMoreData = res.data.length === 0 || res.data.length < 10; // 假设每页10条
        }

        // 隐藏加载提示
        uni.hideLoading();
      } catch (error) {
        // 隐藏加载提示
        uni.hideLoading();

        uni.showToast({
          title: '获取邀请记录失败',
          icon: 'none'
        });

        // 输出错误信息到控制台，便于调试
        console.error('获取邀请记录失败:', error);
      }
    },

    // 下拉刷新
    async onRefresh() {
      if (this.refreshing) return;

      this.refreshing = true;
      this.page = 1;

      try {
        // 重新获取邀请记录
        await this.initInviteList();

        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        });
      } catch (error) {
        uni.showToast({
          title: '刷新失败',
          icon: 'none'
        });
      } finally {
        this.refreshing = false;
      }
    },

    // 加载更多
    async loadMore() {
      if (this.loadingMore || this.noMoreData || this.refreshing) return;

      this.loadingMore = true;
      this.page++;

      try {
        await this.initInviteList();
      } catch (error) {
        this.page--;
        this.loadingMore = false;
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      } finally {
        this.loadingMore = false;
      }
    }
  }
}
</script>

<style>
.ranking-page {
  min-height: 100vh;
  background-color: #eee;
}

.borderBottom {
  border-bottom: 1px solid #eee;
}


.refresh-tip {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
}

.loading-more {
  text-align: center;
}

.icon-loading {
  display: inline-block;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.time {
  font-size: 22rpx;
}

.text-center {
  text-align: center;
}

.py-3 {
  padding-top: 30rpx;
  padding-bottom: 30rpx;
}

.font24 {
  font-size: 24rpx;
}
</style>
